<template>
  <div class="Tables">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
    <el-table-column label="#" type="index" show-overflow-tooltip width="50" align="center"></el-table-column>
      <el-table-column prop="picture" label="车辆图片" width="100" align="center">
        <template slot-scope="scope">
          <img @click="imgpre(scope.row.picture)" class="tableimg" :src="scope.row.picture" alt="">
        </template>
      </el-table-column>
       <el-table-column prop="vehicle_state" label="车辆状态" width="80" align="center">
         <template slot-scope="scope">
         <span>{{scope.row.vehicle_state.title}}</span>
        </template>
       </el-table-column>
      <el-table-column prop="license_plate" label="车牌号" width="100" align="center"></el-table-column>
      <el-table-column prop="color" label="车辆颜色" width="100" align="center">
         <template slot-scope="scope">
          <span v-if="scope.row.color.title">{{scope.row.color.title}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="vehicle_brand" label="品牌车型" width='120' align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.vehicle_brand">{{scope.row.vehicle_brand}}({{scope.row.type.title}})</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="ljnmdv_vin" label="车辆类型" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.vehicle_type.title">{{scope.row.vehicle_type.title}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="use_type" label="车辆用途"  width="90" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.use_type.title}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="school_id" label="关联机构" width="160" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.team_id.title">{{scope.row.team_id.title}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="belong_type" label="经营方式" width="80" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.belong_type==1">直营</span>
          <span v-else>加盟</span>
        </template>
      </el-table-column>

      <el-table-column prop="coach" label="关联教练" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.coach">{{scope.row.coach}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="train_place_id" label="关联训练场" width="180" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.train_place_id.title">{{scope.row.train_place_id.title}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" align="center" v-if="checkPermission(['carEdit','carDelete'])">
        <template slot-scope="scope">
         <span class="edittext" v-if="checkPermission(['carEdit'])" @click="editform(scope.row.id)">编辑</span>
         <span class="edittext" v-if="checkPermission(['carDelete'])" @click="deleteitem(scope.row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-col :span="24" class="pagination">
        <!-- 翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          background
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="pages.total">
        </el-pagination>
      </el-col>
    </el-row>
      <!-- 图片预览插件 -->
    <el-image-viewer
        v-if="showViewer"
        :on-close="()=>{showViewer=false}"
        :url-list="viewUrl"  />
  </div>
</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
//按钮权限验证
import checkPermission from "@/utils/permission";

export default {
  data() {
    return {
      //是否显示预览图片
      showViewer: false,
      //预览图片数组
      viewUrl: [],
      currentPage4:4,
      //表格数据
      tableData: [],
      //页码数据
      pages: {},
    }
  },
  props: {
     //表格数据
    tabData: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  components:{
    ElImageViewer
  },
  methods: {
    //按钮权限验证
    checkPermission,
    handleSizeChange(val) {
      this.$emit('changepageTotal',val)
      },
      handleCurrentChange(val) {
        this.$emit('changepage',val)
      },
      //编辑
    editform(id){
       let params = {
        id,
        type:1
      }
      //显示dialog通知父组件打开弹窗
      this.$emit('openedit',params)
    },
    //删除
    deleteitem(id){
      this.$emit('deleteitem',id)
    },
    imgpre(imgs){
      //每次点击的时候清空数组
      this.viewUrl = []
      this.viewUrl.push(imgs)
      this.showViewer  = true
    },
  },
   watch: {
    tabData(val) {
      this.tableData = val.list
      this.pages = val.page
    },
  },
}
</script>

<style scoped lang='scss'>
.Tables {
  margin-top: 25px;
}
.edittext{
  margin: 0 10px;
  color: #4c68ef;
  cursor: pointer;
}
.pagination{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
</style>
